<template>
  <div class="tip">
    <div class="tip-top">
        <a @click="freeDown" href="https://itunes.apple.com/cn/app/id477927812" id="openApp"> <button  class="top-button">免费下载</button></a>
      <img class="tip-top-img" src="../img/logo.png"/>
      <div class="title-box">
        <span class="title-text">天天老友APP</span>
        <span class="title-text">“友”你不孤单</span>
      </div>
    </div>
    <div class="tip-bottom">
      <button class="top-button">
       <a @click="freeDown" href="https://itunes.apple.com/cn/app/id477927812" id="openApp"> <button  class="top-button">免费下载</button></a>
      </button>
       <img class="tip-bottom-img" src="../img/logo.png"/>
      <div class="title-box">
        <span class="title-bot-text">天天老友APP</span>
        <span class="title-bot-text">“友”你不孤单</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  methods: {
    freeDown () {
      console.log(1)
      // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
      // 否则打开a标签的href链接
      let ifr = document.createElement('iframe')
      ifr.src = 'com.baidu.tieba://'
      ifr.style.display = 'none'
      document.body.appendChild(ifr)
      window.setTimeout(function () {
        document.body.removeChild(ifr)
      }, 3000)
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.title-box{
  display: flex;
  flex-direction: column;
}
.title-text{
  font-size: .3rem;
  color: #FFF;
}
.title-bot-text{
  font-size: .3rem;
  color: #000;
}
.tip-top{
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  height: 1.24rem;
  background: #d99290;
  &-img{
   margin-left: .56rem;
   width: .96rem;
   height: .96rem;
   margin-right: .22rem;
  }
}
.top-button{
    width: 2.8rem;
    height: 1rem;
    background: #DC0E0E;
    color: #FFF;
    font-size: .32rem;
    text-align: center;
    line-height: 1rem;
    position: absolute;
    right: .2rem;
    top: 50%;
    margin-top: -.5rem;
    border-radius: .2rem;
    font-size: .45rem;
  }
.tip-bottom{
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 1.24rem;
  background: #FFF;
  &-img{
   margin-left: .56rem;
   width: .96rem;
   height: .96rem;
   margin-right: .22rem;
  }
}
</style>
